<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(function () {
            var param = getParams();
            var authorId = null;
            $.get("/travels/" + param.id, function (data) {
                authorId = data.author.id;
                console.log(data);
                $(".travels").renderValues(data, {
                    getHref: function (item, value) {
                        console.log(item);
                        console.log(value);
                        var href = $(item).data("href");
                        $(item).attr("href", href + value);
                    }
                })

                //查询是否是关注状态
                $.get('/users/isAttention', {attentionuserId: user.id, beattentionuserId: authorId}, function (data) {
                    if (data.success) {
                        $('#followBtn').html("取消关注");
                    } else {
                        $('#followBtn').html("关注");
                    }
                })

                //查询用户一共有几篇游记
                $.get("/users/travelNum",{userId:authorId},function (data) {
                    $("#num").html(data);
                })
                //查询用户一共有几个粉丝
                $.get("/users/fans",{userId:authorId},function (data) {
                    $("#like").html(data);
                })
            })


            var num ;//总数
            var state;
            //收藏数量
            $.get("/news/nums",{newsId:param.id,type:1},function (data) {
                num = data;
                $("#collectBtn").html(num)
            })

            var num1 ;//总数
            var state1;
            //点赞数量
            $.get("/news/praiseNum",{newsId:param.id,type:1},function (data) {
                num1 = data;
                $("#likeBtn").html(num1)
            })



            //收藏
            if (param.id) {
                //获取作用域中的用户信息
                var user = JSON.parse(sessionStorage.getItem("user"));

                if (user) {
                    //查询当前用户的收藏情况
                    $.get("/travels/collectionCount", {travelId: param.id, userId: user.id, type: 1}, function (data) {
                        if (data) {
                            $("#collectBtn").css("color", "orange").removeClass("fa-star-o").addClass("fa-star")
                        } else {
                            $("#collectBtn").css("color", "black").removeClass("fa-star").addClass("fa-star-o")
                        }
                    })
                }

                $("#collectBtn").click(function () {
                    if (user != null) {
                        $.get("/travels/collectionCount", {travelId: param.id,userId: user.id,type: 1}, function (data) {
                            if (data) {
                                $.get("/travels/" + param.id, function (data) {
                                    $.ajax({
                                        type: "delete",
                                        url: "/travels/" + param.id,
                                        success: function () {
                                            $("#collectBtn").css("color", "black").removeClass("fa-star").addClass("fa-star-o")
                                        }
                                    });
                                });
                                state = false;
                            } else {
                                $.post("/travels/collection", {travelId: param.id,userId: user.id,type: 1}, function (data) {
                                    if (data.success) {
                                        $("#collectBtn").css("color", "orange").removeClass("fa-star-o").addClass("fa-star")
                                    }
                                })
                                state = true;
                            }
                            if (state) {
                                num++;
                            }else{
                                num--;
                            }
                            $("#collectBtn").html(num);
                        })

                    } else {
                        //没有登录,跳转到登录页面
                        $(document).dialog({
                            autoClose: 1200,
                            content: '1.5秒后跳转到登录页面'
                        });

                        setTimeout(function () {
                            window.location.href = "/login.html"
                        }, 1500);
                    }
                })


                //点赞
                if (user) {
                    //用户登录且有点赞过显示红色
                    $.get("/praises", {travelId: param.id, userId: user.id, type: 1}, function (data) {
                        if (data) {
                            $("#likeBtn").css("color", "orange").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
                        }
                    })
                } else {
                    //没有登录时该图标为黑色
                    $("#likeBtn").css("color", "").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up")
                }

                //点赞或取消点赞
                $("#likeBtn").click(function () {
                    if (user != null) {
                        //判断该用户是否有点赞
                        $.get("/praises", {travelId: param.id, userId: user.id, type: 1}, function (data) {
                            if (data) {
                                $.ajax({
                                    type: "delete",
                                    url: "/praises/" + param.id,
                                    success: function () {
                                        $("#likeBtn").css("color", "").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up")
                                    }
                                });
                                state1 = false;
                            } else {
                                $.post("/praises", {travelId: param.id, userId: user.id, type: 1}, function (data) {
                                    if (data.success) {
                                        $("#likeBtn").css("color", "orange").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
                                    }
                                })
                                state1 = true;
                            }
                            if (state1) {
                                num1++;
                            }else{
                                num1--;
                            }
                            $("#likeBtn").html(num1);
                        })

                    } else {
                        //没有登录,跳转到登录页面
                        $(document).dialog({
                            autoClose: 1200,
                            content: '1.5秒后跳转到登录页面'
                        });

                        setTimeout(function () {
                            window.location.href = "/login.html"
                        }, 1500);
                    }
                })
            }

            //关注
            //点击关注按钮发送请求添加中间表的关系
            $('#followBtn').click(function () {
                if (user) {
                    $.post("/users/attention", {attentionuserId: user.id,beattentionuserId: authorId}, function (data) {
                        if (data.success) {
                            $('#followBtn').html("关注");
                        } else {
                            $('#followBtn').html("取消关注");
                        }
                    });
                } else {
                    window.location.href = "/login.html"
                }
            });
        })
    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="lastUpdateTime"></span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a data-href="userProfiles.html?id=" render-key="author.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="author.headImgUrl">
                </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <a data-href="userProfiles.html?id=" render-key="author.id" render-fun="getHref">
                        <span render-html="author.nickName"></span>
                    </a>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span id="num">0 </span>篇游记
                    <span id="like">0 </span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place"></span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days">1</span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <!-- 点赞 -->
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up" id="likeBtn"> </i>
        </div>

        <div class="p-2  flex-fill">
            <i class="fa  fa-commenting-o" id="commentBtn"> </i>
        </div>

        <!-- 收藏 -->
        <div class="p-2  flex-fill">
            <i class="fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>
</div>


</body>

</html>